<template>
    <div>
        <el-dialog v-dialogDrag :close-on-click-modal="false" :title="contentData.F_FullHead" :visible="visible"  append-to-body width="80%"
               :before-close="newshandleClose">
            <div class="newsContent">
                <div class="something">
                    <div class="mr">{{contentData.F_ReleaseTime}}</div>                   
                    <div v-if="contentData.F_TypeId==2" class="something">
                        <div class="mr">{{contentData.F_CategoryId}}</div>
                        <div class="mr">{{$t('Notice.labelInforSou')}}：{{contentData.F_SourceName}}</div>
                        <div>{{$t('Notice.labelAddress')}}：{{contentData.F_SourceAddress}}</div>
                    </div>
                    <div v-else class="something">
                        <div class="mr">{{$t('News.labelWriter')}}：{{contentData.F_AuthorName}}</div>
                        <div class="mr">{{$t('News.labelEdit')}}：{{contentData.F_CompileName}}</div>
                        <div>{{contentData.F_CategoryId}}</div>
                    </div>
                    
                </div>

                <div class="scrollBox">
                    <div class="content" >
                        <div v-html="contentData.F_NewsContent"></div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'News',
  props:['contentData'],
  data () {
    return {
        visible:true
    }
  },
  mounted(){
    this.visible=true
  },
    methods: {
        newshandleClose(){
            this.visible=false
            this.$emit('visible')
        }
    }
}
</script>

<style scoped>
.newsContent{
    height: 600px;
  }
  .something{
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #999;
  }
  .mr{
      margin-right: 40px;
  }
  .scrollBox{
      height: calc(100% - 30px);
      overflow: scroll;
  }
  .content{
      width: 95%;
      margin: 0 auto;
      background: #fafafa;
      height: 100%;
      padding: 20px;
  }
  	@media screen and (max-width: 1370px) {
  	div /deep/ .el-dialog{
  			margin-top: 12vh!important;
  		}
		.newsContent{
		    height: 420px;
		  }
  	}

</style>